<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>多选组件</title>
  <link href="../../component/pear/css/pear.css" rel="stylesheet" />
</head>

<body class="pear-container">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          开发环境
        </div>
        <div class="layui-card-body">
          Select 应用于 多选 场景
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <link href="component/pear/css/pear.css" rel="stylesheet" />
              并
              <script src="component/layui/layui.js"></script>
              并
              <script src="component/pear/pear.js"></script>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          默认主题
        </div>
        <div class="layui-card-body">
          <select name="city5" xm-select="select5" xm-select-skin="default">
            <option value="1">北京</option>
            <option value="2" selected="selected">上海</option>
            <option value="3">广州</option>
            <option value="4" selected="selected">深圳</option>
            <option value="5">天津</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <select name="demo1" xm-selects="demo1" xm-select-skin="default">
                <option value="1">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4" selected="selected">深圳</option>
                <option value="5">天津</option>
              </select>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          绿色主题
        </div>
        <div class="layui-card-body">
          <select name="city1" xm-select="select1">
            <option value="1">北京</option>
            <option value="2" selected="selected">上海</option>
            <option value="3">广州</option>
            <option value="4" selected="selected">深圳</option>
            <option value="5">天津</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <select name="demo2" xm-selects="demo2">
                <option value="1">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4" selected="selected">深圳</option>
                <option value="5">天津</option>
              </select>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          通用主题
        </div>
        <div class="layui-card-body">
          <select name="city2" xm-select="select2" xm-select-skin="normal">
            <option value="1">北京</option>
            <option value="2" selected="selected">上海</option>
            <option value="3">广州</option>
            <option value="4" selected="selected">深圳</option>
            <option value="5">天津</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <select name="demo3" xm-selects="demo3" xm-select-skin="normal">
                <option value="1">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4" selected="selected">深圳</option>
                <option value="5">天津</option>
              </select>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          警告主题
        </div>
        <div class="layui-card-body">
          <select name="city3" xm-select="select3" xm-select-skin="warm">
            <option value="1">北京</option>
            <option value="2" selected="selected">上海</option>
            <option value="3">广州</option>
            <option value="4" selected="selected">深圳</option>
            <option value="5">天津</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <select name="demo4" xm-selects="demo4" xm-select-skin="warm">
                <option value="1">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4" selected="selected">深圳</option>
                <option value="5">天津</option>
              </select>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          危险主题
        </div>
        <div class="layui-card-body">
          <select name="city4" xm-select="select4" xm-select-skin="danger">
            <option value="1">北京</option>
            <option value="2" selected="selected">上海</option>
            <option value="3">广州</option>
            <option value="4" selected="selected">深圳</option>
            <option value="5">天津</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <select name="demo5" xm-selects="demo5" xm-select-skin="danger">
                <option value="1">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4" selected="selected">深圳</option>
                <option value="5">天津</option>
              </select>
            </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../../component/layui/layui.js"></script>
  <script src="../../component/pear/pear.js"></script>
  <script>
    layui.use(['select','code','element'],function() {
      let select=layui.select;

      layui.code();
    });
  </script>
</body>

</html>